<template>
	<article id="areapicker-mobile" >
		<div class="areapicker-mobile-cover" v-if="areapicker.isShow" @click="cancel"></div>
		<transition name="areapicker">
			<div class="areapicker-mobile-box" v-show="areapicker.isShow">
				<div class="header">
					<a class="btn-cancel" @click="cancel">取消</a>
					<span class="choose-txt">请选择地址</span>
					<a class="btn-confirm" @click="confirm">确认</a>
				</div>
				<div class="areapicker-box clearfix">
					<div class="unit-box clearfix">
					</div>
					<div class="mtop-mask"></div>
					<div class="mbottom-mask"></div>
					<div class="province">
						<ul class="province-list" :style="{transform:'translateY(-'+(perHeight*province.thisIndex+province.moveLen)+'px)',transition:'all '+duration+'s cubic-bezier(.05,0.25,0.06,1.1)'}">
							<li class="tooth" v-for="(item,index) of province.list" :class="{'top-mask':index==province.thisIndex,'center-choose':index==province.thisIndex+1,'bottom-mask':index==province.thisIndex+2,}">{{item}}</li>
						</ul>
					</div>
					<div class="city">
						<ul class="city-list" :style="{transform:'translateY(-'+(perHeight*city.thisIndex+city.moveLen)+'px)',transition:'all '+duration+'s cubic-bezier(.05,0.25,0.06,1.1)'}">
							<li class="tooth" v-for="(item,index) of city.list" :class="{'top-mask':index==city.thisIndex,'center-choose':index==city.thisIndex+1,'bottom-mask':index==city.thisIndex+2,}">{{item}}</li>
						</ul>						
					</div>
					<div class="area">
						<ul class="area-list" :style="{transform:'translateY(-'+(perHeight*mArea.thisIndex+mArea.moveLen)+'px)',transition:'all '+duration+'s cubic-bezier(.05,0.25,0.06,1.1)'}">
							<li class="tooth" v-for="(item,index) of mArea.list" :class="{'top-mask':index==mArea.thisIndex,'center-choose':index==mArea.thisIndex+1,'bottom-mask':index==mArea.thisIndex+2,}">{{item}}</li>
						</ul>
					</div>
				</div>
			</div>
		</transition>
	</article>
</template>

<script>
	import areaJson from './pca-code.json'
	function arrIndex(arr,item){
		for( var i=0;i<arr.length;i++){
		    if(arr[i]==item)
		    return i;
		}
		return -1;
	}
	export default{
		name:"areaPicker",
		data(){
			return{
				perHeight:50,//每次移动距离
				duration:0.5,//移动时间
				province:{
					list:[""],
					codeList:[],
					len:0,
					thisIndex:0,//列表当前索引
					add:10,//加速下拉，每次下拉条数
					moveLen:0,//缓慢下拉，列表跟着滑动距离
					addNum:0,//缓慢下拉，下拉的数据条数
					direct:"",//滑动方向
					startPos:null,//开始节点
					endPos:null,//结束节点
				},
				cityAdd:4,
				city:{
					list:[""],
					codeList:[],
					len:0,
					thisIndex:0,//列表当前索引
					add:4,//加速下拉，每次下拉条数
					moveLen:0,//缓慢下拉，列表跟着滑动距离
					addNum:0,//缓慢下拉，下拉的数据条数
					direct:"",//滑动方向
					startPos:null,//开始节点
					endPos:null,//结束节点
				},
				mAreaAdd:7,
				mArea:{
					list:[""],
					codeList:[],
					len:0,
					thisIndex:0,//列表当前索引
					add:7,//加速下拉，每次下拉条数
					moveLen:0,//缓慢下拉，列表跟着滑动距离
					addNum:0,//缓慢下拉，下拉的数据条数
					direct:"",//滑动方向
					startPos:null,//开始节点
					endPos:null,//结束节点
				}
			}
		},
		mounted:function(){
			var _this=this;
			_this.eventBind();
			_this.onChooseAddress();
		},
		methods:{
			onChooseAddress:function(){
				var _this=this;
				_this.areapicker.$off('chooseAddress');
				_this.areapicker.$on('chooseAddress',(val)=>{
					_this.duration=0;
					_this.init(val);
					setTimeout(function(){
						_this.duration=0.5;
					},500)
				})
			},
			cancel:function(){
				this.areapicker.hide();
				this.onChooseAddress();
			},
			confirm:function(){
				this.areapicker.$emit("confirm",this.province.list[this.province.thisIndex+1]+","+this.city.list[this.city.thisIndex+1]+","+this.mArea.list[this.mArea.thisIndex+1]);
				this.areapicker.hide();
				this.onChooseAddress();
			},
			init:function(val){
				var _this=this;
				_this.province.codeList.length=0;
				_this.province.list.length=0;
				_this.province.list.push("");
				for(var key in areaJson){
					_this.province.codeList.push(areaJson[key].a);
					_this.province.list.push(areaJson[key].b);
				}
				_this.province.list.push("");
				_this.province.len=areaJson.length;
				if(val.trim().length==0){
					_this.province.thisIndex=0;
					_this.loadCity(0,0);
					_this.loadArea(0,0);
				}else{
					var arr=val.split(",");
					_this.province.thisIndex=arrIndex(_this.province.list,arr[0])-1;
					_this.loadCity(arr[1],_this.province.thisIndex);
					_this.loadArea(arr[2],_this.city.thisIndex);
				}
			},
			//根据当前索引获取省份信息和城市列表
			getProvinceByIndex:function(provinceIndex){
				return areaJson[provinceIndex];
			},
			//根据当前索引获取城市信息和省份列表
			getCityByIndex:function(cityIndex){
				var _this=this;
				return areaJson[_this.province.thisIndex].c[cityIndex]
			},
			getAreaByIndex:function(areIndex,cityData){
				return cityData.c[areIndex];
			},
			//加载城市列表
			loadCity:function(thisIndex,provinceIndex){
				var _this=this;
				var city=_this.city;
				city.list.length=0;
				city.codeList.length=0;
				city.list.push("");
				var cityList=_this.getProvinceByIndex(provinceIndex).c;
				for(var index in cityList){
					city.list.push(cityList[index].b);
					city.codeList.push(cityList[index].a);
				}
				city.len=cityList.length;
				if(city.len<city.add){
					city.add=city.add-2;
				}else{
					city.add=_this.cityAdd
				}
				city.list.push("");
				if(thisIndex==0){
					city.thisIndex=0;
				}else{
					city.thisIndex=arrIndex(city.list,thisIndex)-1;
				}
			},
			//加载地区列表
			loadArea:function(thisIndex,cityIndex){
				var _this = this;
				var mArea=_this.mArea;
				mArea.list.length=0;
				mArea.codeList.length=0;
				mArea.list.push("");
				var mAreaList=_this.getCityByIndex(cityIndex).c;
				for(var index in mAreaList){
					mArea.list.push(mAreaList[index].b);
					mArea.codeList.push(mAreaList[index].a);
				}
				mArea.len=mAreaList.length;
				if(mArea.len<mArea.add){
					mArea.add=mArea.len-2;
				}else{
					mArea.add=_this.mAreaAdd
				}
				mArea.list.push("");
				if(thisIndex==0){
					mArea.thisIndex=0;
				}else{
					mArea.thisIndex=arrIndex(mArea.list,thisIndex)-1;
				}
			},
			//==================绑定touch事件=====================
			eventBind:function(){
				var _this=this;
				var mDom={
					province:document.querySelector(".province-list"),
					city:document.querySelector(".city-list"),
					mArea:document.querySelector(".area-list")
				}
				for(var key in mDom){
					var currentObj=this[key];
					_this.touchBind(currentObj,mDom[key]);
					
				}
			},
			touchBind:function(currentObj,currentDom){
				var _this=this;
				currentDom.addEventListener("touchstart",function(event){
					var touch = event.targetTouches[0];
					currentObj.startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};
				},false);
				currentDom.addEventListener("touchmove",function(event){
					event.preventDefault();
					var touch = event.targetTouches[0];
	　　				currentObj.endPos = {x:touch.pageX - currentObj.startPos.x,y:touch.pageY - currentObj.startPos.y,};
					currentObj.direct = Math.abs(currentObj.endPos.x) < Math.abs(currentObj.endPos.y) ? 1:0;//为1时，表示纵向滑动，0为横向滑动
					_this.moveThis(currentObj,currentDom);
				},false);
				currentDom.addEventListener("touchend",function(event){
					var duration = new Date - currentObj.startPos.time;
				　	if(currentObj.direct === 1){
						_this.scrollList(currentDom,currentObj,duration)
				 	}
				},false)
			},
			scrollList:function(_div,currentObj,duration){
				var _this=this;
				currentObj.moveLen=0;
				var scrollLen=currentObj.endPos.y;
				if(duration<150&&Math.abs(scrollLen)>150){
					if(scrollLen>0){
						if(currentObj.thisIndex<currentObj.add){
							currentObj.thisIndex=0;
						}
						else{
							currentObj.thisIndex-=currentObj.add;
						}
					}else{
						if(currentObj.thisIndex>(currentObj.len-currentObj.add-1)){
							currentObj.thisIndex=currentObj.len-1;
						}
						else{
							currentObj.thisIndex+=currentObj.add;
						}
					}				
				}else{
					if(scrollLen>0){
						if(currentObj.thisIndex<currentObj.addNum){
							currentObj.thisIndex=0;
						}
						else{
							currentObj.thisIndex-=currentObj.addNum;
						}
					}else{
						if(currentObj.thisIndex>(currentObj.len-currentObj.addNum-1)){
							currentObj.thisIndex=currentObj.len-1;
						}
						else{
							currentObj.thisIndex+=currentObj.addNum;
						}
					}
				}
			},
			moveThis(currentObj,_div){
				var _this=this;
				var distance=currentObj.endPos.y;
				currentObj.moveLen=-distance;
				var addNum=Math.round(Math.abs(distance)/_this.perHeight);
				currentObj.addNum=addNum;
			},
		},
		computed:{
			areapicker(){
				return window.AREAPICKER_BUS;
			}
		},
		watch:{
			"province.thisIndex"(val){
				this.loadCity(0,val);
				this.loadArea(0,0);
			},
			"city.thisIndex"(val){
				this.loadArea(0,val);
			}
		}
	}
</script>

<style scoped>
	@media only screen and (orientation:landscape) {
		.areapicker-mobile-cover,
		.areapicker-mobile-box{
			max-width:40pc; margin-left:auto;margin-right:auto;
		}
	}
	.areapicker-mobile-cover{
		width: 100vh;height: 100vh;background-color:rgba(0,0,0,.5) ;position:fixed;top:0;z-index: 2017;
	}
	.areapicker-mobile-box{
		width:100vw;height:200px;position:fixed;bottom:0;z-index: 2018;padding: 10px;background-color: #fff;border-top: solid 1px #ccc;
	}
	.header{
		width:100%;height:30px;line-height:30px;text-align:center;position:relative;
	}
	.btn-cancel{
		position: absolute;left: 0;top:0;color:#5290F5 ;
	}
	.btn-cancel:active{
		background-color: #ECECEC;
	}
	.btn-confirm{
		position: absolute;right: 0;top:0;color:#5290F5 ;
	}
	.btn-confirm:active{
		background-color: #ECECEC;
	}
	.areapicker-box{
		width:100%;height:calc(100% - 30px);position:relative;font-size: 16px;
	}
	.unit-box{
		position: absolute;top:50%;height: 50px;width: 100%;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;margin-top: -25px;
	}
	.unit{
		width:calc(100% / 3);float:left;text-align: right;line-height:50px;font-weight: bold;
	}
	.areapicker-box .province,
	.areapicker-box .city,
	.areapicker-box .area{
		width:calc(100% / 3);float: left;overflow-y:hidden ;height: 100%;position:relative;
	}
	.tooth{
		text-align: center;line-height:50px ;height: 50px;white-space: nowrap
	}
	.center-choose{
		font-weight: bold;
	}
	.mtop-mask{
		position: absolute;left: 0;top:0;z-index: -1;width:100%;height: 50px;background:linear-gradient(to top,rgba(238,238,238,0),rgba(238,238,238,.2));
	}
	.mbottom-mask{
		position: absolute;left: 0;bottom:0;z-index: -1;width:100%;height: 50px;background: linear-gradient(rgba(238,238,238,0),rgba(238,238,238,.2));
	}
	.top-mask{
		 /*background: linear-gradient(red, blue)*/
	}
	.bottom-mask{
		
	}
	.areapicker-enter,
	.areapicker-leave-to{
		transform: translateY(100%);opacity: 0;
	}
	.areapicker-enter-to,
	.areapicker-leave{
		transform: translateY(-1%);;opacity: 1;
	}
	.areapicker-enter-active,
	.areapicker-leave-active{
		transition:all .5s;transform-origin: bottom;
	}
</style>